/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <section class="content">
    <div class="main-box">
      <Header :title="homeData.title">
        <div class="left" slot="left" @click="goBack">
          <i class="iconfont icon-previewleft" style="font-size: 22px"></i>
        </div>
        <div class="right" slot="right">
          <i @click="handlerFollow" :class="['iconfont', follow　? 'icon-shoucang1' : 'icon-shoucang']" style="font-size: 22px;margin-right: 5px;"></i>
          <i @click="goProjectMap" class="iconfont icon-ditu" style="font-size: 22px;"></i>
        </div>
      </Header>
      <div class="tabbar">
        <ul>
          <li @click="handlerTabbar(0)">日</li>
          <li @click="handlerTabbar(1)">周</li>
          <li @click="handlerTabbar(2)">月</li>
          <li @click="handlerTabbar(3)">年</li>
        </ul>
        <div class="line" :style="{left: tabbarLineLeft}">
          <div class="inline"></div>
        </div>
      </div>
      <div class="top">
        <div class="main">
          <canvas ref="canvasPie" width="540" height="540"></canvas>
          <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
            <div class="textBox" v-show="topTextVis">
              <p class="text1">{{Number(homeData.signedTotal) || 0}}</p>
              <p class="text2">{{homeData.percent*100 || 0}}%</p>
              <p class="text3">累计已签约户数</p>
            </div>
          </transition>
        </div>
        <div class="bottom">
          <ul>
            <li @click="goSignProjectDetail">
              <h3><countup :end-val="Number(homeData.userSigned) || 0" :duration="2" :decimals="0" ></countup></h3>
              <p>签约户数(户)</p>
            </li>
            <li @click="goPayProjectMoneyDetail">
              <h3><countup :end-val="Number(homeData.amountPayed) || 0" :duration="2" :decimals="2" ></countup></h3>
              <p>支出资金(万元)</p>
            </li>
            <li @click="goGetProjectMoneyDetail">
              <h3><countup :end-val="Number(homeData.amountTotal) || 0" :duration="2" :decimals="2" ></countup></h3>
              <p>到账资金(万元)</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="news"></div>
      <div class="modal-wrap">
        <!-- 我的关注 -->
        <!-- <Attention></Attention> -->
        <!-- 总体征收情况 -->
        <OverallCondition :family="family">
          <div slot="right" @click="goFamilyList">
            征收户详情<i class="iconfont icon-arrow-double-right"></i>
          </div>
        </OverallCondition>
        <!-- 总体房屋类型 -->
        <HouseTypes :house="house"></HouseTypes>
        <!-- 征收资金情况 -->
        <MoneyTotal :money="money"></MoneyTotal>
        <!-- 补偿均价 -->
        <Price :price="price"></Price>
        <!-- 全年进度状况 -->
        <ProjectSchedule :chartData="schedule" :selecte="true"></ProjectSchedule>
        <!-- 补偿方式 -->
        <Compensation :compenstation="compenstation"></Compensation>
        <!-- 劳务排名 -->
        <NaowuRank :laowuRank="laowuRank"></NaowuRank>
        <!-- 征收面积 -->
        <!-- <HouseArea :area="area"></HouseArea> -->
        <!-- 资金分类 -->
        <MoneyType :moneyType="moneyType"></MoneyType>
        <!-- 每月支出情况 -->
        <ProjectMoneySchedule :chartData="moneySpeed" :selecte="true"></ProjectMoneySchedule>
        <!-- 底线 -->
        <div class="bottomLine">
          <Divider style="font-size: 12px;">我是有底线的</Divider>
        </div>
      </div>
    </div>
    </div>
  </section>
</template>
<script>
require("../../assets/js/tween.js");
require("../../assets/js/canvasUnit.js");
import {
  reqScreenFamily,
  reqScreenHouse,
  reqScreenMoney,
  reqSignSpeedDay,
  reqScreenCompensation,
  reqScreenLaowuRank,
  reqScreenArea,
  reqScreenThirdCom,
  reqMoneySpeedDay,
  reqProjectHome,
  reqAvgPrice,
  reqProjectFllow,
  reqMoneyType,
  reqProjectUnFllow
} from "../../api/index.js";
import Header from '../../components/Header/Header.vue';
import Attention from '../../components/Attention/Attention.vue';
import OverallCondition from '../../components/OverallCondition/OverallCondition.vue';
import HouseTypes from '../../components/HouseTypes/HouseTypes.vue';
import MoneyTotal from '../../components/MoneyTotal/MoneyTotal.vue';
import ProjectSchedule from '../../components/ProjectSchedule/ProjectSchedule.vue';
import Compensation from '../../components/Compensation/Compensation.vue';
import NaowuRank from '../../components/NaowuRank/NaowuRank.vue';
import HouseArea from '../../components/HouseArea/HouseArea.vue';
import ThirdCom from '../../components/ThirdCom/ThirdCom.vue';
import Price from '../../components/Price/Price.vue';
import ProjectMoneySchedule from '../../components/ProjectMoneySchedule/ProjectMoneySchedule.vue';
import MoneyType from '../../components/MoneyType/MoneyType.vue';
import { Countup, Divider, XHeader, ButtonTab, ButtonTabItem, Popover } from 'vux';
import { VPopover } from 'v-tooltip'


export default {
  data() {
    return {
      topTextVis: false,
      homeData: {},
      selectedIndex: 0,
      family: {}, //总体征收情况数据
      house: {}, //房屋类型
      money: {}, // 资金状况
      schedule: {}, // 项目进度
      laowuRank: [], // 劳务排名
      compenstation: {}, //补偿方式
      area: {}, // 面积信息
      thirdCom: {}, // 第三方机构信息
      moneySpeed: {}, // 每月支出情况
      price: {}, //补偿均价
      moneyType: {}, //资金分类
      follow: false,
    };
  },
  computed: {
    tabbarLineLeft: function() {
      return this.selectedIndex * 25 + '%';
    }
  },
  watch: {
    selectedIndex: function(data) {
      this.reqHomeData(data);
    }
  },
  methods: {
    initCanvasPie(value) {
      let ctx = this.$refs.canvasPie.getContext("2d");
      console.log("ctx", ctx);
      // value是其中的值
      var value = value,
        centerLeft = 270,
        centerTop = 270,
        radius = 270,
        lineWidth = 30,
        i = 0,
        textShow = false,
        circularAni;
      var drawAnimationBackground = function() {
        var i = 1;
        var j = 1;
        var t = 1;
        // var animatedFlag = false
        var circularAni = setInterval(function() {
          var a = Math.tween.Elastic.easeOut(t, 0, radius, 93);

          ctx.clearRect(0, 0, centerLeft * 4, centerTop * 4);
          drawACircular(
            2,
            "",
            "rgba(255, 255, 255, 0.2)",
            100,
            (t * 1.5 * radius) / 60
          );
          drawACircular(
            4,
            "",
            "rgba(255, 255, 255, 0.5)",
            100,
            (t * 1.5 * radius * 0.9) / 60
          );
          drawACircle("rgba(255, 255, 255, 0.1)", 100, a * 0.7);
          drawACircle("rgba(255, 255, 255, 0.1)", 100, a * 0.5);
          t++;
          if ((t * 1.5 * radius) / 60 >= radius) {
            clearInterval(circularAni);
            setBounceCircularValue(value);
          }
        }, 1000 / 60);
      };

      var drawBounceBackground = function() {
        drawACircular(1, "", "rgba(255, 255, 255, 0.2)", 100, radius);
        drawACircular(2, "", "rgba(255, 255, 255, 0.5)", 100, radius * 0.9);
        drawACircle("rgba(255, 255, 255, 0.1)", 100, radius * 0.5);
        drawACircle("rgba(255, 255, 255, 0.1)", 100, radius * 0.7);
      };

      var drawACircular = function(lineWidth, lineCap, color, percent, radius) {
        ctx.setLineWidth(lineWidth);
        ctx.setStrokeStyle(color);
        ctx.setLineCap(lineCap);
        ctx.beginPath();
        ctx.arc(
          centerLeft,
          centerTop,
          radius,
          (-Math.PI * 2) / 4,
          (Math.PI * 2 * percent) / 100 - (Math.PI * 2) / 4,
          false
        );
        ctx.stroke();
      };

      var drawACircle = function(color, percent, radius) {
        ctx.setLineWidth(1);
        ctx.setFillStyle(color);
        ctx.beginPath();
        ctx.arc(
          centerLeft,
          centerTop,
          radius,
          (-Math.PI * 2) / 4,
          (Math.PI * 2 * percent) / 100 - (Math.PI * 2) / 4,
          false
        );
        ctx.fill();
      };

      var setBounceCircularValue = function(value) {
        if (value > 100) {
          value = 100;
          i = 100;
        }
        if (value < 0) {
          value = 0;
          i = 0;
        }
        value = value;
        if (circularAni) {
          clearInterval(circularAni);
        }
        var isNegative = value - i < 0;
        circularAni = setInterval(() => {
          ctx.clearRect(0, 0, centerLeft * 4, centerTop * 4);
          drawBounceBackground();

          drawACircular(
            lineWidth,
            "",
            "rgba(255, 255, 255, 0.6)",
            i,
            radius * 0.9 - lineWidth / 2
          );
          if (i === value) {
            clearInterval(circularAni);
            return;
          } else {
            i = isNegative ? i - 1 : i + 1;
          }
        }, 1000 / 60);
      };

      drawAnimationBackground();
    },
    handlerTabbar(index) {
      this.selectedIndex = index;
    },
    async reqHomeData(index) {
      this.$store.dispatch('changeLoadingVis', { data: true })
      const types = ['day', 'week', 'month', 'year'];
      console.log('this.$router', this.$router)
      let data = await reqProjectHome({ timetype: types[index], seqno: this.$router.history.current.query.seqno });
      if (data.code === 1) {
        this.homeData = data.data;
        this.follow = data.data.follow;
        this.initCanvasPie(data.data.percent * 100);

      } else {
        console.log(name + ":数据获取失败!");
      }
      this.$store.dispatch('changeLoadingVis', { data: false })
    },
    async reqData(name, getAjax, params) {
      // let params = this.pageTypes;
      let data = await getAjax({ seqno: this.$router.history.current.query.seqno });
      if (data.code === 1) {
        this[name] = data.data;
      } else {
        console.log(name + ":数据获取失败!");
      }
    },
    async reqAllData(data) {
      this.reqData("family", reqScreenFamily, data); // 户数信息
      this.reqData("house", reqScreenHouse, data); // 房屋类型
      this.reqData("money", reqScreenMoney, data); // 资金状况
      this.reqData("schedule", reqSignSpeedDay, data); // 项目进度
      this.reqData("compenstation", reqScreenCompensation, data); // 补偿方式
      this.reqData("laowuRank", reqScreenLaowuRank, data); // 劳务排名
      this.reqData("area", reqScreenArea, data); // 面积信息
      this.reqData("thirdCom", reqScreenThirdCom, data); // 第三方机构信息
      this.reqData("moneySpeed", reqMoneySpeedDay, data); // 项目资金进度
      this.reqData("moneyType", reqMoneyType); // 资金分类
      this.reqData("price", reqAvgPrice, data); // 项目资金进度
    },
    async handlerFollow() {
      // this.follow = !this.follow;
      console.log('follow', this.follow)
      if (!this.follow) {
        // 关注
        const result = await reqProjectFllow({ seqno: this.$router.history.current.query.seqno });
        if (result.code === 1) {
          this.follow = !this.follow;
          this.$vux.toast.show({
            type: 'text',
            text: '关注成功!'
          });
        } else {
          this.$vux.toast.show({
            type: 'text',
            text: result.msg || '关注失败!'
          });
        }
      } else {
        // 取消关注
        const result = await reqProjectUnFllow({ seqno: this.$router.history.current.query.seqno });
        if (result.code === 1) {
          this.follow = !this.follow;
          this.$vux.toast.show({
            type: 'text',
            text: '取消关注成功!'
          });
        } else {
          this.$vux.toast.show({
            type: 'text',
            text: result.msg || '取消关注失败!'
          });
        }
      }
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: '/' })
        return false
      } else {
        this.$router.go(-1)
      }
    },
    goFamilyList() {
      this.$router.push({ path: '/familyList', query: { seqno: this.$router.history.current.query.seqno } })
    },
    goProjectMap() {
      this.$router.push({ path: '/projectMap', query: { seqno: this.$router.history.current.query.seqno } })
    },
    goSignProjectDetail() {
      const types = ['day', 'week', 'month', 'year'];
      const num = Number(this.homeData.userSigned) || 0;
      if (num <= 0) {
        this.$vux.toast.show({ type: "text", text: '暂无明细数据' })
      } else {
        this.$router.push({ path: '/signProjectDetail', query: { type: types[this.selectedIndex], seqno: this.$router.history.current.query.seqno} })
      }
    },
    goGetProjectMoneyDetail() {
      const types = ['day', 'week', 'month', 'year'];
      const num = Number(this.homeData.amountTotal) || 0;
      if (num <= 0) {
        this.$vux.toast.show({ type: "text", text: '暂无明细数据' })
      } else {
        this.$router.push({ path: '/getProjectMoneyDetail', query: { type: types[this.selectedIndex], seqno: this.$router.history.current.query.seqno} })
      }
    },
    goPayProjectMoneyDetail() {
      const types = ['day', 'week', 'month', 'year'];
      const num = Number(this.homeData.amountPayed) || 0;
      if (num <= 0) {
        this.$vux.toast.show({ type: "text", text: '暂无明细数据' })
      } else {
        this.$router.push({ path: '/payProejctMoneyDetail', query: { type: types[this.selectedIndex], seqno: this.$router.history.current.query.seqno} })
      }
    },
  },
  mounted() {
    const self = this;
    setTimeout(() => {
      self.topTextVis = true;
      self.reqAllData();
      self.reqHomeData(self.selectedIndex);
    }, 300)
  },
  components: {
    Countup,
    Divider,
    Attention,
    OverallCondition,
    HouseTypes,
    MoneyTotal,
    ProjectSchedule,
    Compensation,
    NaowuRank,
    HouseArea,
    ThirdCom,
    ProjectMoneySchedule,
    Price,
    MoneyType,
    Header
  }
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();

  .main-box {
    .be-full();
    overflow: auto;
  }
}


.tabbar {
  background: @primary;
  position: relative;

  ul {
    .mix-flex-center();
    padding-bottom: 2px;

    li {
      flex: 1;
      .mix-flex-center();
      color: @white;
      padding: 10px 0;
      font-weight: 600;
    }
  }

  .line {
    transition: left 0.3s;
    width: 25%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    .mix-flex-center();

    .inline {
      width: 50%;
      height: 100%;
      background: @white;
      border-radius: 1px;
    }
  }
}

.top {
  background-color: @primary;
  .mix-flex-center();
  height: 380px;
  padding-bottom: 60px;
  position: relative;
  color: @white;

  .main {
    .be-full();
    position: relative;
    .mix-flex-center();

    canvas {
      transform: scale(0.5, 0.5);
    }
  }

  .bottom {
    position: absolute;
    width: 100%;
    height: 80px;
    left: 0;
    bottom: 20px;

    ul {
      .be-full();
      .mix-flex-center();

      li {
        flex: 1;
        .mix-flex-center();
        flex-direction: column;

        p {
          color: #eaeaea;
        }
      }
    }
  }
}

.textBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  p {
    text-align: center;
    margin-bottom: 10px;
    color: @white;

    &.text1 {
      font-weight: 600;
      font-size: 18px;
    }

    &.text2 {
      font-size: 14px;
    }

    &.text3 {
      color: #eaeaea;
    }
  }
}

.modal-wrap {
  position: relative;
  top: -20px;
  // background: red;
  height: 100px;
  width: 100%;
  padding: 0 16px;
}

.modal-wrap /deep/ .modal-box {
  padding: 3px 10px;
  background: @white;
  border-radius: 6px;
  margin-bottom: 15px;

  .title {
    padding: 6px 0;
    border-bottom: 1px solid @border-base;
    margin-bottom: 10px;
    display: flex;

    b {
      flex: 1;
      font-weight: 500;
      color: @font-primary;
      font-size: 14px;
      color: ;

      &.right {
        text-align: right;
        font-size: 12px;
        color: @font-regular;
        .mix-flex-center();
        justify-content: flex-end;
        font-weight: normal;

        i {
          position: relative;
          font-size: 12px;
          margin-left: 3px;
          top: 1px;
          font-weight: normal;
        }
      }
    }
  }


}

.bottomLine {
  padding: 0 10%;
}

</style>
